
{%- capture crop_class -%}
{% if theme_config.global.product_size != '0' %}product_card-picture-crop-{{theme_config.global.product_size}}{% endif %}
{%- endcapture -%}

{%- capture hover_class -%}
{% if theme_config.global.product_move_two %}{% if product.images[1].src %}product_img_hover{% endif %}{% endif %}
{%- endcapture -%}


{%- capture product_handle -%}
  {% if product.handle and product.handle != "" %}
    {%- if storeConfig.collection_product_url == 1 -%}
      /products/{{ product.handle }}?data_from={{product.data_from | default:data_from}}
    {%- else -%}
      {%- if collection_handle and collection_handle != "" -%}/collections/{{collection_handle}}{% endif %}/products/{{ product.handle }}?data_from={{product.data_from | default:data_from}}
    {%- endif -%}
  {% else %}
    javascript:;
  {%- endif -%}
{%- endcapture -%}




{%- capture product_alt -%}
{%- if product.image.alt == "" -%}
  {{ product.title }}
  {%- else -%}
  {{ product.image.alt }}
{%- endif -%}
{%- endcapture -%}



<div class="product_card">
  <div class="product_card-picture {{hover_class}}">
    <a class="product_card-picture-image {{crop_class}} plugin-product_item-img_box" data-product-id="{{product.id}}"  href="{{product_handle}}">
      {% include 'lazy_img', class:"product_card-picture-default default_img", src:product.src,  alt:product_alt %}

        {% if theme_config.global.product_move_two and product.images[1].src  %}
        <img class="product_card-picture-hover hover-two" data-sizes="auto" alt="{{product_alt}}" data-src="{{ product.images[1].src }}" src="{{ 'empty_loading.png' | public_asset_abs_url }}"/>
        {% endif %}
        {% if product.available == 0 %}
        <div class="product_card-soldout">{{ lang.general.sold_out }}</div>
        {% endif %}

        {% if theme_config.global.product_preview %}
        <div class="product_quick-mask">
          <div class="product_quick-view product_view" data-handle="{{ product.handle }}" data-from="{{data_from}}" href="javascript:void(0)">{{ lang.general.quick_view }}</div>
        </div>
        {% endif %}
    </a>
    
    {% if theme_config.global.product_preview %}
    <div class="product_quick-mobile-view product_view" data-handle="{{ product.handle }}" data-from="{{data_from}}" href="javascript:void(0)">
      <svg t="1666169082361" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2537" width="18" height="18"><path d="M469.333333 469.333333V170.666667h85.333334v298.666666h298.666666v85.333334h-298.666666v298.666666h-85.333334v-298.666666H170.666667v-85.333334h298.666666z" fill="#444444" p-id="2538"></path></svg>
    </div>
    {% endif %}

    {% if theme_config.global.product_discount_label and product.variant.price > 0 %} 
    {% if product.variant.price < product.variant.compare_at_price %}
    {% assign price = product.variant.compare_at_price | minus: product.variant.price | divided_by: product.variant.compare_at_price | times: 100 | floor %}
    {% if price > 0 %}
    <div class="product_card-tag {{ theme_config.global.discount_label_style }}"><div class="discount_tag_graphics"></div><div class="discount_tag_name">{{ price }}% <span>OFF</span></div></div>
    {% endif %} 
    {% endif %}
    {% endif %}

    

  </div>
  <div class="product_card-name {% unless theme_config.global.product_title_model %}product_card-wap-name{% endunless %}">
    <a class="{% if theme_config.global.product_title_style == 'hide' %}text-ellipsis{% endif %}" href="{{product_handle}}">{{ product.highlight_title | default : product.title | default:"Title" }}</a>
    <a class="{% if theme_config.global.product_title_style == 'hide' %}text-ellipsis{% endif %}" href="{{product_handle}}">{{ product.highlight_title | default : product.title | default:"Title" }}</a>
  </div>
  <div class="product_card-price">
    {% if product.variant.price < 0 %}
      <span class="general-color">{{ "88.88" | money }}</span>
    {% else %}
      <span class="general-color">{{ product.variant.price | money }}</span>
    {% endif %}
    {% if product.variant.compare_at_price != "0" and  product.variant.price < product.variant.compare_at_price %}
        <span class="general-oldprice">{{ product.variant.compare_at_price  | default : "88.88" | money }}</span>
    {% endif %}
  </div>

  {% if theme_config.global.product_discount_label_style_switch and product.variant.price > 0 %} 
    {% if product.variant.price < product.variant.compare_at_price %}
    <div class="product_price" style='color:var(--discount_tag_bg);margin-top: 4px;display: flex;justify-content:center;'>
        {{lang.general.save}}
        {% if theme_config.global.product_discount_label_style == 2 %}
        {% assign price = product.variant.compare_at_price | minus: product.variant.price | divided_by: product.variant.compare_at_price | times: 100 | floor %}
        {{price}}%
        {% else %}
        {% assign price = product.variant.compare_at_price | minus: product.variant.price | round: 2  %}
        {{price | money}}  
        {% endif %}
    </div>
    {% endif %}
  {% endif %}
  {% include 'comment_star', score:product.star, style: "margin-top:10px" %}

  {% if theme_config.global.product_img_list_type != 0 %}
    <div class="block_product_img_list noRender">
        <div class="img_list" style="display: flex;justify-content: center;flex-wrap: wrap;">
       {% if theme_config.global.product_img_list_type == "1" %}
        {% assign colorOptions = theme_config.global.product_sku_options | join: ',' | downcase | split: ',' %}
        {% assign isFindSuccess = false %}
        {% if product.variants.size > 0 %}
            {% for option in product.options %}
                {% assign option_name = option.name | downcase %}
                {% assign hasOptionName = option_name | in_array: colorOptions %}
                {% if hasOptionName and isFindSuccess == false %}
                    {% assign isFindSuccess = true %}
                    {% assign optionIndex = option.position | plus: 1 %}
                    {% assign optionTitle = "option" | append: optionIndex | append: "_title" %}
                    {% assign optionValueTitle = "option" | append: optionIndex | append: "_value_title" %}
                    {% assign optionValues = "" %}
                    {% assign isSelectOptions = "" %}
                    
                    {% for optionValueItem in option.values %}
                           {% assign optionValues = optionValues | append: optionValueItem.option_value | append: ',' %}
                    {% endfor %}
                    {% for variant in product.variants %}
                        {% assign varinatTitle = variant | getArrayValueByKey: optionTitle | downcase %}
                        {% assign variantValue = variant | getArrayValueByKey: optionValueTitle | downcase %}
                        {% assign hasVarinatTitle = colorOptions contains varinatTitle %}
                        {% assign hasValue = optionValues contains variantValue %}
                        
                        {% if hasVarinatTitle != '' and  hasValue != '' %}
                            {% unless isSelectOptions contains variantValue %}
                                {% if variant.image %}
                                    {% assign isSelectOptions = isSelectOptions | append: variantValue | append: ',' %}
                                    <a href="{{ product_handle | append: "&variant_sku_code=" | append: variant.sku_code }}" class="img_list_item"><img data-src="{{variant.image.src}}"  src="{{ 'empty_loading.png' | public_asset_abs_url }}"></a>
                                {% endif %}
                            {% endunless %}
                        {% endif %}
                    {% endfor %}
                    
                {% endif %}
            {% endfor %}
        {% endif %}

       {% elsif theme_config.global.product_img_list_type == "2" %}
        {% if product.variants.size > 0 %}
            {% for imgsItem in product.images %}
                <a href="{{ product_handle }}" class="img_list_item"><img data-src="{{imgsItem.src}}"  src="{{ 'empty_loading.png' | public_asset_abs_url }}"></a>
            {% endfor %}
        {% endif %}
       {% endif %}
       <div class="morNumber"></div>
       </div>
    </div>
  {% endif %}

</div>


